//设置--菜单管理
import React from "react";
import PageTitle from "../../component/set/PageTitle";
import IconFont from "../../component/logo";
import SetMenuTable from "../../component/set/SetMenuTable";
import HOCSetMenu from "../../component/set/HOC/HOCSetMenu";
import SetButton from "../../component/set/SetBtton";
import { Modal, Form, Input, Upload, Button, Switch } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import "./css/setMenu.css";

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

@HOCSetMenu
class SetMenu extends React.Component {
  render() {
    let {
      data,
      columns,
      pagination,
      isModalVisible,
      handleOk,
      handleCancel,
      iconImg,
      beforeUploadImg,
      handleRemove,
      modelTitle,
      addMenu
    } = this.props;
    return (
      <div ref="setMenu" className='set_menu'>
        <PageTitle
          title="菜单管理"
          icon={<IconFont type="icon-caidan" />}
          btn={<SetButton onClick={addMenu} txt="添加" />}
        ></PageTitle>
        <SetMenuTable
          data={data}
          columns={columns}
          pagination={pagination}
        ></SetMenuTable>
        <Modal
          className="setMenu"
          title={modelTitle}
          visible={isModalVisible}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Form name="formOne" ref="formOne">
            <Form.Item
              label="名称"
              name="menuName"
              rules={[{ required: true, message: "请输入菜单名称" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="图标"
              name="menuIcons"
              rules={[{ required: true, message: "请上传菜单图标" }]}
            >
              <Upload
                action=""
                listType="picture"
                className="upload-list-inline"
                fileList={iconImg}
                beforeUpload={(file) => beforeUploadImg(file, "iconImg")}
                onRemove={(file) => handleRemove(file, "iconImg")}
              >
                <Button icon={<UploadOutlined />}>Upload</Button>
              </Upload>
            </Form.Item>
            <Form.Item
              label="链接"
              name="menuLink"
              rules={[{ required: true, message: "请填写菜单链接" }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="排序"
              name="menuSort"
              rules={[{ required: true, message: "请填写顺序" }]}
            >
              <Input />
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}

export default SetMenu;
